<template>
	<view v-if="isShow" catchtouchmove="true" class="container" :style="{ backgroundColor: bgcolor, width: '100%', top: topX + 'px', zIndex: zIndex, height: heightX + 'px' }">
		<!-- 阴影块 -->
		<view
			class="shadow"
			v-for="(s, sIndex) in shadowList"
			:key="sIndex+s.top"
			:style="{ top: s.top - topX + 'px', left: s.left + 'px', width: s.width + 'px', height: s.height + 'px',background:blockColor }"
		></view>
		<!-- 矩形 -->
		<view
			class="rect"
			v-for="(r, rIndex) in rectList"
			:key="rIndex+r.top"
			:style="{ top: r.top - topX + 'px', left: r.left + 'px', width: r.width + 'px', height: r.height + 'px',background:blockColor }"
		></view>
		<!-- 圆角矩形 -->
		<view
			class="rect radius"
			v-for="(rr, rrIndex) in rectRadiusList"
			:key="rrIndex+rr.top"
			:style="{ top: rr.top - topX + 'px', left: rr.left + 'px', width: rr.width + 'px', height: rr.height + 'px',background:blockColor }"
		></view>
		<!-- 圆形 -->
		<view
			class="round"
			v-for="(rd, rdIndex) in roundList"
			:key="rdIndex+rd.top"
			:style="{ top: rd.top - topX + 'px', left: rd.left + 'px', width: rd.width + 'px', height: rd.height + 'px',background:blockColor }"
		></view>
	</view>
</template>

<script>
const app = getApp();

export default {
	props: {
		show: {
			type: Boolean,
			default: true
		},
		bgcolor: {
			type: String,
			default: '#fff'
		},
		blockColor: {
			type: String,
			default: '#f0f0f0'
		},
		top: {
			type: Number,
			default: 0
		},
		zIndex: {
			type: Number,
			default: 999
		},
		height: {
			type: Number,
			default: uni.getSystemInfoSync().windowHeight
		}
	},
	data() {
		return {
			isShow: false,
			screenInfo: {},
			shadowList: [],
			rectList: [],
			rectRadiusList: [],
			roundList: [],
			topX: '',
			heightX: '',
			concatList: []
		};
	},
	watch: {
		show: {
			handler(flag) {
				this.isShow = flag;
				if (flag) {
					this.getScreenInfo();
					this.draws();
				}
			},
			immediate: true
		}
	},
	created() {
		
		this.topX = app.rpxTransformpx(this.top);
		this.heightX = app.rpxTransformpx(this.height);
		uni.$on('skeletonComponents', res => {
			this.concatRectRadius(res);
		}); 
	},
	methods: {
		getScreenInfo() {
			const info = uni.getSystemInfoSync();
			this.screenInfo = {
				width: info.windowWidth,
				height: info.windowHeight
			};
		},
		draws() {
			this.$nextTick(() => {
				this.drawShadow();
				this.drawRect();
				this.drawRectRadius();
				this.drawRound();
				
			});
		},
		// 绘制矩形
		drawRect() {
			uni.createSelectorQuery()
				.selectAll('.skeleton-rect')
				.boundingClientRect()
				.exec(rects => {
					this.rectList = rects[0];
				});

			
		},
		concatRectRadius(res){			
			if (res) {
				this.concatList = this.concatList.concat(res);
			}
		},
		// 绘制圆角矩形
		drawRectRadius() {
			uni.createSelectorQuery()
				.selectAll('.skeleton-rect-radius')
				.boundingClientRect() 
				.exec(rects => {
					this.rectRadiusList = rects[0];
					this.rectRadiusList = this.rectRadiusList.concat(this.concatList)	
					// console.log(this.rectRadiusList)
			});
		},
		// 绘制圆形
		drawRound() {
			uni.createSelectorQuery()
				.selectAll('.skeleton-round')
				.boundingClientRect()
				.exec(rects => {
					this.roundList = rects[0];
					
				});
			
		},
		// 绘制阴影块
		drawShadow() {
			uni.createSelectorQuery()
				.selectAll('.skeleton-shadow')
				.boundingClientRect()
				.exec(rects => {
					this.shadowList = rects[0]; 
				});
			
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
	overflow: hidden;

	.shadow {
		position: absolute;
		background: #f0f0f0;
	}

	.rect {
		position: absolute;
		background: #f0f0f0;
	}

	.round {
		position: absolute;
		background: #f0f0f0;
		border-radius: 50%;
	}

	.radius {
		border-radius: 14rpx;
	}
}
</style>
